What if you could build a web app just as easily as writing a to-do list?

With GitHub Spark, recently unveiled at GitHub Universe 2024, now you can. Designed to turn plain English commands into fully functional web applications, GitHub Spark is our latest leap toward making development easier and more intuitive for everyone. Whether you're a developer looking to streamline your workflow, or a beginner eager to dive into web creation, GitHub Spark is here to ignite your ideas.

Curious how it works? This edition of The GitHub Insider will give you a tour, enabling you to jump in and build new applications today.

Let’s go!

Step #1: Describe your application and generate 🐵

On the GitHub Spark homepage, describe what you want to create. Let’s say you want to create an app that tracks the cities you’ve visited. You could type:

“Create an app for me to log all the cities I’ve traveled with a review and star rating system and plot those ratings onto a map.”

Rather than providing you with the code, GitHub Spark produces an app that you can interact with immediately.

Step #2: Review and customize ✅

The app GitHub Spark created included inputs for the longitude and latitude of the cities visited, but this isn’t always available. What if we wanted that data to be filled in automatically based on the city entered into the “City Name” field? Simple enough to fix. In the Refine your spark box, type in:

“Autofill latitude and longitude based on the city entered.”

Feel free to iterate some more. Let’s say you want to allow the user to update and delete items in their city list. Just add in the Refine your spark box:

“Allow the user to update and delete items in their city list.”

Step #3: Refine your app with variants 🌈

Looking to change up the look and feel? Provide vague requests (e.g., "Make the styling retro with bright colors"). GitHub Spark will generate design variants. Select and apply the design that best matches your vision.

Step #4: Troubleshoot ⛔

But wait. What if you refine your app, but your changes aren’t quite right? For instance, maybe some of the CSS choices made aren’t as readable as we want. We could ask GitHub Spark to make changes, but an even better solution exists: fix the code yourself!

Click on the Code tab and modify the code that exists behind the app. You can see your changes impact the app in real time!

Extra tip: Command-F (or Control-F for Windows and Linux users) works on the code files, and you can use that to find specific queries in your code. This is especially useful if you’re looking for a specific line, or in our case, color.

Step #5: Track changes with the history timeline ⏰

Just like Git, your changes are saved throughout your project’s history. Use the history timeline to review, revert, or explore alternate revision paths for your app.

This is a great way to revert a change you might not like or to revisit a previous change.

Note: any data you’ve entered into your app will remain even if you go back in time. You can always remove any data from your app by clicking on the data tab in the Spark toolbar and choosing to modify or delete that data.

Step #6: Finalize and save the app 💾

Nearly done? Go ahead and rename the app to something meaningful. Also, you can star the app for quick access on your dashboard.

Sign up for GitHub Spark

---

✨ This newsletter was written by Christina Warren and produced by Gwen Davis. ✨

---

The world’s leading AI-powered developer platform.